<template>

  <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

    <el-form-item label="试卷名称" prop="title">
      <el-input v-model="postForm.title" size="small" />
    </el-form-item>

    <el-form-item label="试卷分类" prop="catId">
      <dic-catalog-tree v-model="postForm.catId" dic-code="tmpl_catalog" />
    </el-form-item>

    <el-form-item label="组卷方式" prop="joinType">
      <el-radio-group v-model="postForm.joinType">
        <el-tooltip class="item" effect="dark" content="手动选题或系统按规则抽题，组成固定的试卷" placement="bottom">
          <el-radio label="choose">固定组卷</el-radio>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="设置组卷规则，题目不固定，考试时候随机生成，实现千人千卷的效果" placement="bottom">
          <el-radio label="rand">随机组卷</el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" style="width: 100%" @click="handleConfirm">下一步</el-button>
    </el-form-item>

  </el-form>

</template>

<script>

export default {
  name: 'TmplPreCreate',
  props: {
    value: Object
  },
  data() {
    return {
      postForm: {
        joinType: 'choose',
        title: '',
        catId: ''
      },
      rules: {

        title: [
          { required: true, message: '试卷名称不能为空！' }
        ],
        catId: [
          { required: true, message: '试卷分类不能为空！' }
        ],
        joinType: [
          { required: true, message: '组卷方式不能为空！' }
        ]
      }
    }
  },
  watch: {
    // 检测查询变化
    value: {
      handler(val) {
        this.postForm = val
      }
    }
  },

  created() {
    if (this.value != null && this.value.id != null) {
      this.postForm = this.value
    }
  },
  methods: {

    // 确定选择
    handleConfirm() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.$emit('confirm', this.postForm)
      })
    },

    // 清除数据
    clear() {
      this.postForm = {
        joinType: 'choose',
        title: '',
        catId: ''
      }
      this.$nextTick(() => {
        if (this.$refs.postForm) {
          this.$refs.postForm.clearValidate()
        }
      })
    }
  }
}
</script>
